var submitBtn = document.getElementById('submit')

//验证规则的对象，对象的键是每个输入框的id值，值是验证的正则对象
var validateRule = {
    first_name: /^\w{2,}/,
    email: /^\w{2,}@\w+\.\w{2,}/,
    telephone: /^1[3-9]\d{9}$/,
    pw1: /^[^\s].{6,20}/,
    pw2: /^[^\s].{6,20}/
}

//各项输入框的验证状态，false代表验证为通过，true代表通过
var validateState = {
    first_name: false,
    email: false,
    telephone: false,
    pw1: false,
    pw2: false,
    pwdEqual: false
}

//判断两个密码是否相等，如果相等设置validateState
function validatePassword() {
    var pw1 = document.getElementById('pw1').value
    var pw2 = document.getElementById('pw2').value
    validateState.pwdEqual = pw1 == pw2 ? true : false
}

//验证表单函数
function validate(validateRule) {
    //迭代验证规则的对象，key代表对象的键
    for (key in validateRule) {
        //通过验证规则的键去获取相对于的元素
        var validateEle = document.getElementById(key);
        //添加输入框失去焦点的事件
        validateEle.addEventListener('blur', function() {
            //获取当前输入框的输入内容
            var v = this.value;
            //获取当前元素的id，元素的id值就是validateRule的键
            var eleId = this.id;
            //获取当前元素验证规则的正则表达式对象
            var reg = validateRule[eleId]
                //进行验证
            if (!reg.test(v)) {
                //如果验证为通过
                console.log("验证未通过")
                    //设置验证状态
                validateState[eleId] = false
                    //设置样式
                this.classList.remove('right')
                this.classList.add('error')
            } else {
                console.log("验证通过啦")
                validateState[eleId] = true
                this.classList.remove('error')
                this.classList.add('right')
            }
            //如果重复密码输入框失去焦点，即输入结束，进行两次密码是否一致的验证
            if (eleId == "pw2") {
                //调用
                validatePassword()
            }
        });

    };

}
//调用validate函数
validate(validateRule)

//注册按钮点击，即进行表单提交
submitBtn.onclick = function(e) {
    //  检验表单验证状态
    //迭代validateState对象，如果有一项是false就阻止提交
    for (key in validateState) {
        if (!validateState[key]) {
            //阻止默认行为，这里就是阻止表单提交
            e.preventDefault();
        }
    }
}